<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<!-- 引入样式 -->
<link rel="stylesheet"
	href="https://unpkg.com/element-ui@2.4.10/lib/theme-chalk/index.css">

<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.10/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="js/login.js"></script>
<script src="js/Role.js"></script>
<script src="js/Search.js"></script>
<script src="js/User.js"></script>


<title>Search</title>


<style>
   	.borderStyle {background-color: #fff;border: 1px #dbdbdb solid;padding: 10px 0 10px 0px;}
</style>

</head>

<body>

	<div id="app"  >
		<el-container > 
		  
	        <el-header class="block borderStyle">	
	           <div id="app2">
		        <el-row :gutter="20">
		  				<el-col :span="8">
		  				</el-col>
		  				<el-col :span="8" :offset="8">
		  					欢迎使用系统
		  				</el-col>
		  				<el-col :span="8">
		  					<el-button type="primary"    @click="logout"  size="medium">登出</el-button>
		  				</el-col>
				</el-row>
				</div>
	        </el-header> 

	        
	        <el-container > 
		        <el-aside width="200px">
		               <el-row class="tac">
						  <el-col :span="24">
						      <el-menu default-active="1" class="" >
							      <el-menu-item index="1">
							        <span slot="title"   @click="goToUser"  >用户</span>
							      </el-menu-item>
							      <el-menu-item index="2" >
							        <span slot="title">角色</span>
							      </el-menu-item>
							      <el-menu-item index="3">
							        <span slot="title">查询</span>
							      </el-menu-item>
						    </el-menu>
						  </el-col>
					</el-row>
		        </el-aside>
		      	<el-main class="block">
		      	
					  <el-form :inline="true" :model="searchform" class="">
						  <el-form-item label="条件1">
						    <el-input v-model="searchform.one" placeholder="条件1"></el-input>
						  </el-form-item>
						  <el-form-item label="条件2">
						    <el-input v-model="searchform.two" placeholder="条件2"></el-input>
						  </el-form-item>
						  <el-form-item>
						    <el-button type="primary"    @click="search"  >查询</el-button>
						  </el-form-item>
					</el-form>
				
				
					<template>
					  <el-table :data="tableData" border style="width: 100%">
					  	<el-table-column type="index" label="序号"  width="200">
					    </el-table-column>
					     <el-table-column prop="id"  v-if="false">
					    </el-table-column>
					    <el-table-column prop="name" label="名字"  width="300">
					    </el-table-column>
					    <el-table-column prop="dataTime" label="时间" width="300">
					    </el-table-column>
					    <el-table-column prop="description" label="描述">
					    </el-table-column>
					  </el-table>
					  <div style="margin:20px 0px 0px 0px;">
					  	<el-pagination background layout="prev, pager, next"  :model="pagination" :total="pagination.totalCount"  :page-size="pagination.pageSize" 
					  	                  :current-page.sync="pagination.currentPage"  @current-change="currentChange"  @prev-click="prevPage"  @next-click="nextPage" >
						</el-pagination>
					   </div>
					</template>
				
						
		      	</el-main> 
	      	<el-container > 
    </el-container>

	</div>

</body>


<script>

var searchProp = {
	      data() {
	    	  return { 
	    		  searchform:{
	    			  one:'',
	    			  two:''
				   },
				   tableData:[],
				   pagination:{
					   totalCount:0,
					   pageSize:10,
					   currentPage:1
				   }
	    		}
	      },
	    methods: {
	    	logout(){
				return logout();
			},
			search(){
				searchApp.pagination.currentPage =1;
				return page(1);
			},
			nextPage(pageNum){
				console.log('nextPage : ' + pageNum);
				return page(pageNum);
			},
			prevPage(pageNum){
				console.log('prevPage : ' + pageNum);
				return page(pageNum);
			},
			currentChange(pageNum){
				console.log('currentChange : ' + pageNum);
				return page(pageNum);
			},
			goToUser(){
				window.location.href="/User.html";
			}
	      }

		}



var Ctor1 = Vue.extend(searchProp);
var searchApp = new Ctor1().$mount('#app'); 

</script>

<script>

function test(){
	axios.get('/search')
	  .then(function (response) {
	    console.log(response);
	    console.log(response.data);
	  })
	  .catch(function (error) {
	    console.log(error);
	  });
}


function test3(){
	axios.get('template/testTemplate.html')
	  .then(function (response) {
	    console.log(response);
	    console.log(response.data);
	    
	    document.getElementById("app2").innerHTML = response.data
	    
	  })
	  .catch(function (error) {
	    console.log(error);
	  });
}



</script>
</html>